<template>
  <x-page title="首页" class="x-page-index">
    <div class="propaganda">
      <swiper direction="horizontal" class="text-scroll advertising-box" :show-dots="true">
        <swiper-item class="swiper-demo-img" v-for="(item, index) in adList" :key="index">
          <!--<x-img :src="item.picUrl" :webp-src="item.picUrl" />-->
          <img :src="item.pic_info.url" />
        </swiper-item>
      </swiper>
    </div>

    <x-card title="推荐歌单" sub-title="为你精挑细选">
      <div class="recom-play-list">
        <div v-for="(item, index) in recomPlaylist" :key="index" class="recom-play-box">
          <div class="cover">
            <img :src="item.cover">
          </div>
          <div class="recom-play-title">
            {{item.title}}
          </div>
        </div>
      </div>
    </x-card>

    <!--<card :header="{title: '电台'}">-->
      <!--<div slot="content" class="card-demo-flex card-demo-content01">-->
        <!--<div v-for="(item, index) in radioList" :key="index" class="vux-1px-r">-->
          <!--<x-img :src="item.picUrl" />-->
          <!--<br/>{{item.Ftitle}}-->
        <!--</div>-->
      <!--</div>-->
    <!--</card>-->

  </x-page>
</template>

<script>
import { Swiper, SwiperItem, XImg, AjaxPlugin, GroupTitle, Grid, GridItem, Card } from 'vux'
import { queryHome } from '../libs/service'
export default {
  name: 'index',
  components: { Swiper, SwiperItem, XImg, AjaxPlugin, GroupTitle, Grid, GridItem, Card },
  data () {
    return {
      params: {
        g_tk: 1928093487,
        uin: 0,
        loginUin: 411985844,
        hostUin: 0,
        format: 'json',
        inCharset: 'utf8',
        outCharset: 'utf-8',
        notice: 0,
        platform: 'yqq',
        needNewCode: 0
      },
      adList: [],
      radioList: [],
      recomPlaylist: []
    }
  },
  methods: {
    // queryHomeData () {
    //   let url = this.HOST + '/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'
    //   AjaxPlugin.$http.get(url, {
    //     params: this.params
    //   }).then(res => {
    //     if (res && res.status === 200) {
    //       let response = res.data && res.data.data ? res.data.data : {}
    //       this.adList = response.slider
    //       this.radioList = response.radioList
    //     }
    //   }).catch(e => {
    //     console.log(e)
    //   })
    // },
    queryHomeData() {
      queryHome({}).then((res) => {
        this.adList = res.focus.data.content
        // this.recomPlaylist = res.recomPlaylist.data.v_hot
        let recomPlaylist = res.recomPlaylist.data.v_hot
        recomPlaylist.map((item, index) => {
          if (index < 4) {
            this.recomPlaylist.push(item)
          }
        })
      })
    }
  },
  created () {
    this.queryHomeData()
  }
}
</script>
